//
//  Home.swift
//  StretchyNav
//
//  Created by qingzhou on 2021/5/31.
//

import SwiftUI

struct Home: View {
    @State var offset: CGFloat = 0
    
    @Environment(\.colorScheme) var colorScheme
    
    @State var currentTab: String = "创作中心"
    
    @Namespace var animation
    
    @State var tabBarOffset: CGFloat = 0
    
    @State var titleOffset: CGFloat = 0
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false, content: {
            VStack(spacing: 15){
                GeometryReader { proxy -> AnyView in
                    
                    let minY = proxy.frame(in: .global).minY
                    DispatchQueue.main.async {
                        self.offset = minY
                    }
                        return AnyView(
                            ZStack{
                                Image("poster")
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width: getRect().width, height: minY > 0 ? 180 + minY : 180)
                                    .cornerRadius(0)
                                
                                BlurView()
                                    .opacity(blurViewOpacity())
                                
                                VStack{
                                    Text("轻舟")
                                        .font(.title)
                                        .foregroundColor(.red)
                                    Text("个人中心")
                                        .foregroundColor(.red)
                                }
                                .offset(y: 120)
                                .offset(y: titleOffset > 160 ? 0 : -getTitleOffset())
                                .opacity(titleOffset < 160 ? 1 : 0)
                            }
                            .clipped()
                            .frame(height: minY > 0 ? 180 + minY : nil)
                            .offset(y: minY > 0 ? -minY : -minY < 80 ? 0 : -minY - 80)
                        )
                }
                .frame(height: 180)
                .zIndex(1)
                
                VStack(spacing: 0) {
                    HStack {
                        Image("logo")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 75, height: 75)
                            .clipShape(Circle())
                            .padding(8)
                            .background(colorScheme == .dark ? Color.black : Color.white)
                            .clipShape(Circle())
                            .offset(y: -offset > 0 ? getOffset() - 20 : -20)
                            .scaleEffect(getScale())
                        
                        Spacer()
                        Button(action:{}) {
                            Text("编辑")
                                .foregroundColor(.blue)
                                .padding(.vertical, 10)
                                .padding(.horizontal)
                                .background(
                                    Capsule()
                                        .stroke(Color.blue, lineWidth: 1.5)
                                )
                        }
                    }
                    .padding(.top, -25)
                    .padding(.bottom, -10)
                    VStack(alignment: .leading, spacing: 8, content: {
                        Text("QingZhou")
                            .font(.title)
                            .fontWeight(.semibold)
                        Text("@_qingzhou")
                            .foregroundColor(.gray)
                            .fontWeight(.semibold)
                        Text("我是轻舟，一名iOS开发兴趣爱好者，希望大家多多关注，点个赞评论一下吧！！！")
                            .fixedSize(horizontal: false, vertical: true)
                        HStack(){
                            Text("7")
                                .font(.title)
                            Text("粉丝")
                                .foregroundColor(.gray)
                            HStack(){
                                Text("11")
                                    .font(.title)
                                Text("关注")
                                    .foregroundColor(.gray)
                            }
                            .padding()
                        }
                            
                    })
                    .overlay(
                        GeometryReader{ proxy -> Color in
                            
                            let minY = proxy.frame(in: .global).minY
                            
                            DispatchQueue.main.async {
                                self.titleOffset = minY
                            }
                            return .clear
                        }
                    )
                    VStack(spacing: 0){
                        ScrollView(.horizontal, showsIndicators: false, content: {
                            HStack(spacing: 0) {
                                TabButton(title: "创作中心", currentTab: $currentTab, animation: animation)
                                TabButton(title: "历史记录", currentTab: $currentTab, animation: animation)
                                TabButton(title: "我的收藏", currentTab: $currentTab, animation: animation)
                                TabButton(title: "稍后再看", currentTab: $currentTab, animation: animation)
                            }
                            
                        })
                        Divider()
                    }
                    .padding(.top,20)
                    .background(Color.white)
                    .offset(y: tabBarOffset < 100 ? -tabBarOffset + 100 : 0)
                    .overlay(
                        GeometryReader {proxy -> Color in
                            let minY = proxy.frame(in: .global).minY
                            
                            DispatchQueue.main.async {
                                self.tabBarOffset = minY
                            }
                            
                            return Color.clear
                        }
                    )
                    .zIndex(1)
                    VStack(spacing: 15) {
                        ScrollItem(title: "WWDC大会将于2021年6月7日开始发布，到时候我们一起观看吧！！！", contentImage: "app2")
                            .padding(.vertical)
                        Divider()
                        ForEach(1...10, id:\.self) { item in
                            ScrollItem(title: seleTitle)
                            Divider()
                        }
                    }
                    .zIndex(0)
                    
                }
                .padding(.horizontal)
                .zIndex(-offset > 80 ? 0 : 1)
            }
        })
        .ignoresSafeArea(.all, edges: .top)
    }
    
    func getTitleOffset() -> CGFloat {
        let progress = 20 / titleOffset
        let offset = 60 * (progress > 0 && progress <= 1 ? progress : 1)
        return offset
    }
    
    func getOffset() -> CGFloat {
        let progress = (-offset / 80) * 20
        return progress <= 20 ? progress : 20
    }
    func getScale() -> CGFloat {
        let progress = -offset / 80
        let scale = 1.8 - (progress < 1.0 ? progress : 1)
        return scale < 1 ? scale : 1
    }
    func blurViewOpacity() -> Double {
        let progress = -(offset + 80) / 150
        return Double(-offset > 80 ? progress : 0)
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}
extension View {
    func getRect() -> CGRect {
        return UIScreen.main.bounds
    }
}

struct TabButton: View {
    var title: String
    @Binding var currentTab: String
    var animation: Namespace.ID
    var body: some View {
        Button(action:{
            withAnimation{
                currentTab = title
            }
        }){
            LazyVStack(spacing: 10) {
                Text(title)
                    .fontWeight(.semibold)
                    .foregroundColor(currentTab == title ? .blue : .gray)
                if currentTab == title {
                    Capsule()
                        .foregroundColor(.blue)
                        .frame(height:  1.2)
                        .matchedGeometryEffect(id: "TAB", in: animation)
                } else {
                    Capsule()
                        .foregroundColor(.clear)
                        .frame(height:  1.2)
                        
                }
                
            }
            .padding(.horizontal)
        }
    }
}

struct ScrollItem: View {
    var title: String
    var contentImage: String?
    var body: some View {
        HStack(alignment: .top) {
            Image("app2")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 75, height: 75)
                .clipShape(Circle())
            
            VStack(alignment: .leading, spacing: 15) {
                Text("qingzhou ")
                    .font(.title)
                    .fontWeight(.bold)
                    +
                    
                    Text("@_qingzhou")
                    .font(.title2)
                    .foregroundColor(.gray)
                    .fontWeight(.semibold)
                Text(title)
                    .fontWeight(.regular)
                    .foregroundColor(.gray)
                    .fixedSize(horizontal: false, vertical: true)
                
                if let image = contentImage {
                    GeometryReader { proxy in
                        Image(image)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width:proxy.frame(in: .global).width, height: 150)
                            .cornerRadius(20)
                    }
                    .frame(height: 150)
                }
                
            }
        }
    }
}
var seleTitle = "时间又过了一年，macOS 又迎来了一次更新，众所周知，苹果将在2021年的晚些时候发布关于 Mac 的一些新功能和改进。一直以来苹果在软件发布方面的模式都没有改变过。"
